<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="UTF-8">
	<title>注册</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />

	<link rel="stylesheet" href="../AmazeUI-2.4.2/assets/css/amazeui.min.css" />
	<link href="../css/dlstyle.css" rel="stylesheet" type="text/css">
	<script src="../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
	<script src="../AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.6/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
	<script src="../js/axiosUtil.js"></script>
</head>

<body>

	<div class="login-boxtitle">
		<a href="home/demo.html"><img alt="" src="../images/logobig.png" /></a>
	</div>

	<div class="res-banner">
		<div class="res-main">
			<div class="login-banner-bg"><span></span><img src="../images/big.jpg" /></div>
			<div class="login-box" style="height:440px;">

				<div class="am-tabs" id="doc-my-tabs">

					<div class="am-tabs-bd">
						<div class="am-tab-panel am-active" id="app" style="margin-top: -30px;">
							<form method="post">
								<div class="user-name">
									<label for="username"><i class="am-icon-user"></i></label>
									<input type="text" v-model="form.username" id="username" placeholder="请输入用户名">
								</div>
								<div class="user-pass">
									<label for="password"><i class="am-icon-lock"></i></label>
									<input type="password" v-model="form.password" id="password" placeholder="设置密码">
								</div>
								<div class="user-pass">
									<label for="passwordRepeat"><i class="am-icon-lock"></i></label>
									<input type="password" v-model="password2" id="passwordRepeat" placeholder="确认密码">
								</div>
								<div class="user-name">
									<label for="phone"><i class="am-icon-phone"></i></label>
									<input type="phone" v-model="form.phone" id="phone" placeholder="请输入手机号">
								</div>
								<div class="user-email">
									<label for="email"><i class="am-icon-envelope-o"></i></label>
									<input type="email" v-model="form.email" id="email" placeholder="请输入邮箱账号">
								</div>
								<div class="user-name">
									<label for="question"><i class="am-icon-envelope-o"></i></label>
									<input type="text" v-model="form.question" id="question" placeholder="请输入密保问题">
								</div>
								<div class="user-name">
									<label for="answer"><i class="am-icon-envelope-o"></i></label>
									<input type="text" v-model="form.answer" id="answer" placeholder="请输入密保答案">
								</div>
							</form>

							<div class="login-links">
								<label for="reader-me">
									<input id="reader-me" type="checkbox"> 点击表示您同意商城《服务协议》
								</label>
							</div>
							<div class="am-cf">
								<input type="submit" name="" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl" @click="register">
							</div>

						</div>

					</div>
				</div>

			</div>
		</div>

		<div class="footer ">
			<div class="footer-hd ">
				<p>
					<a href="# ">燕园科技</a>
					<b>|</b>
					<a href="home.html">商城首页</a>
					<b>|</b>
					<a href="# ">支付宝</a>
					<b>|</b>
					<a href="# ">物流</a>
				</p>
			</div>
			<div class="footer-bd ">
				<p>
					<a href="# ">关于燕园</a>
					<a href="# ">合作伙伴</a>
					<a href="# ">联系我们</a>
					<a href="# ">网站地图</a>
				</p>
			</div>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					// 这是登录表单的数据绑定对象 超级管理员
					form: {
						username: 'test',
						password: '123456',
						question: '就读学校',
						answer: 'ysu',
						email: '515646266@qq.com',
						phone: '15733568492'
					},
					password2: '123456'
				},
				computed: {

				},
				methods: {
					register() {
						
						$axios.post('/shop/user/register',
							response => {
								window.location.href = "login.html"
							},
							this.form
						)
					}
				}
			})
		</script>
</body>

</html>